<template>
    <div class="app-container">

        <!-- 查询表单 -->
        <el-form :inline="true">
            <el-form-item>
                <!-- <el-input v-model="searchObj.name" placeholder="讲师"></el-input> -->
                <el-autocomplete class="inline-input" v-model="searchObj.name" :fetch-suggestions="querySearch"
                    placeholder="讲师" :trigger-on-focus="false" value-key="name"></el-autocomplete>
            </el-form-item>
            <el-form-item>
                <el-select v-model="searchObj.level" clearable placeholder="头衔">
                    <el-option label="高级讲师" value="1"></el-option>
                    <el-option label="首席讲师" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="入驻时间">
                <el-col :span="11">
                    <el-date-picker placeholder="选择起始日期" v-model="searchObj.joinDateBegin" value-format="yyyy-MM-dd"
                        style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-date-picker placeholder="选择终止日期" v-model="searchObj.joinDateEnd" value-format="yyyy-MM-dd"
                        style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
                <el-button @click="resetData">清空</el-button>
            </el-form-item>
        </el-form>

        <!-- 工具条 -->
        <div style="margin-bottom: 10px;">
            <el-button type="danger" size="mini" @click="batchRemove">批量删除</el-button>
        </div>

        <!-- 列表 -->
        <el-table :data="list" border stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" />
            <el-table-column label="#" width="50">
                <template slot-scope="scope">
                    {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="id" label="id" width="80"> </el-table-column>
            <el-table-column prop="name" label="姓名" width="80"> </el-table-column>
            <el-table-column prop="intro" label="资质"> </el-table-column>
            <el-table-column prop="sort" label="排序" width="80"> </el-table-column>
            <el-table-column prop="joinDate" label="入驻时间" width="120">
            </el-table-column>
            <el-table-column prop="level" label="级别" width="100">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.level === 1">高级讲师</el-tag>
                    <el-tag type="success" v-if="scope.row.level === 2">首席讲师</el-tag>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <router-link :to="'/teacher/edit/' + scope.row.id">
                        <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                    </router-link>
                    <el-button size="mini" type="danger" @click="removeById(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination @current-change="changeCurrentPage" @size-change="changePageSize"
            layout="sizes,prev, pager, next,jumper, ->, total" :current-page="page" :page-sizes="[5, 10, 20]"
            :page-size="limit" :total="total" style="padding: 30px 0; text-align: center">
        </el-pagination>
    </div>
</template>

<script>
import teacherApi from "@/api/teacher";

export default {
    data() {
        return {
            list: [], // 讲师列表
            total: 0, // 总记录数
            page: 1, // 页码
            limit: 10, // 每页记录数
            searchObj: {}, // 查询表单
            multipleSelection: [], // 被选中的列表行
        };
    },
    created() {
        this.fetchData();
    },
    methods: {
        // 调用远程 api
        fetchData() {
            teacherApi
                .pageList(this.page, this.limit, this.searchObj)
                .then((response) => {
                    this.list = response.data.rows;
                    this.total = response.data.total;
                });
        },
        // 当前页修改
        changeCurrentPage(page) {
            this.page = page;
            this.fetchData();
        },
        // 每页数修改
        changePageSize(pageSize) {
            this.limit = pageSize;
            this.fetchData();
        },
        // 重置表单
        resetData() {
            this.searchObj = {}
            this.fetchData()
        },
        // 删除记录
        removeById(id) {
            // 询问是否删除
            this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 删除请求
                teacherApi.removeById(id).then(response => {
                    // 刷新页面
                    this.fetchData()
                    // 弹出成功提示
                    this.$message({
                        message: response.message,
                        type: 'success'
                    });
                })
            }).catch((err) => {
                if (err === 'cancel') {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                }
            });

        },

        // 批量删除
        batchRemove() {
            // 判断数据是否选中
            if (this.multipleSelection.length === 0) {
                this.$message({
                    type: 'warning',
                    message: '请选择要删除的内容'
                })
                return
            }
            // 询问是否删除
            this.$confirm('此操作将删除这些数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 拿到被选中数据
                let idList = []
                this.multipleSelection.forEach(item => {
                    idList.push(item.id)
                })
                // 删除请求
                teacherApi.batchRemove(idList).then(response => {
                    // 刷新页面
                    this.fetchData()
                    // 弹出成功提示
                    this.$message({
                        message: response.message,
                        type: 'success'
                    });
                })
            }).catch((err) => {
                if (err === 'cancel') {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                }
            });

        },
        // 表格多选项发生变化时触发
        handleSelectionChange(selection) {
            this.multipleSelection = selection
        },

        // 输入建议
        querySearch(queryString, callback) {
            teacherApi.selectNameListByKey(queryString).then(response => {
                callback(response.data.nameList)
            })
        }
    },
};
</script>
